@import './_variables.less';
// reset
* {
  box-sizing: border-box;
  outline: none;
}

html {
  font-size: 13px;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
  color: #000;
  background-color: #f1f1f1;
  -webkit-font-smoothing: antialiased; // 字体平滑
}

a {
  text-decoration: none;
  color: #999;
}

ul, li {
  list-style: none;
}

h3 {
  margin: 0;
}
// color
each(@colors, {
  .text-@{key} {
    color: @value !important;
  }
  .bg-@{key} {
    background-color: @value;
  }
})
// font
each(@textAlign, {
  .text-@{value} {
    text-align: @value !important;
  }
})

each(@font-sizes, {
  .fs-@{key} {
    font-size: @value * @base-font-size;
  }
})
// 一行显示溢出省略
.ellipse {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ellipse2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

// width height
.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}
// flex
each(@flex-jc, {
  .jc-@{key} {
    justify-content: @value;
  }
})

each(@flex-ai, {
  .ai-@{key} {
    align-items: @value;
  }
})

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}
// margin padding
each(@spacing-type, .(@type, @typeKey) {
  each(@spacing-direction, .(@direction, @directionKey) {
    each(.spacing-sizes(), {
      // mt-1
      .@{typeKey}@{directionKey}-@{key} {
        @{type}-@{direction}: @value * @spacing-base-size;
      }
    })
  })
  each(.spacing-sizes(), {
    // m-1
    .@{typeKey}-@{key} {
      @{type}: @value * @spacing-base-size;
    }
    // mx-1
    .@{typeKey}x-@{key} {
      @{type}-left: @value * @spacing-base-size;
      @{type}-right: @value * @spacing-base-size;
    }
    // my-1
    .@{typeKey}y-@{key} {
      @{type}-top: @value * @spacing-base-size;
      @{type}-bottom: @value * @spacing-base-size;
    }
  })
})
// button
.btn {
  border: none;
  border-radius: .153846rem;
  font-size: .923077rem;
  padding: .2rem .6rem;
}

.nav {
  .nav-item {
    padding-bottom: .2rem;
    &.active {
      border-bottom: 3px solid currentColor
    }
  }
}

// sprite
.sprite {
  background: url('https://game.gtimg.cn/images/yxzj/m/m201706/images/bg/index.png') no-repeat 0 0;
  background-size: 375px;
  display: inline-block;
}